<template>
    <van-form @submit="onSubmit" ref="form" @failed="checkFail">
      <van-field
        v-model="form.phone"
        name="phone"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' },
           {
            pattern:reg.phone,
            message:'请输入有效的手机号码',
          }
        ]"
      />
      <van-field
        v-model="form.password"
        :type="type"
        name="password"
        label="密码"
        placeholder="密码"
        :right-icon="type=='password'?'eye':'eye-o'"
        @click-right-icon="changetype"
        :rules="[
          { required: true, message: '请填写密码' },
          { pattern:reg.pwd,message:'请输入6-16位的密码'}
        ]"
      />
      <div  style="margin: 0.5rem;">
          <p class="links">
              <router-link class="aitem " :to="{name:'register'}">没有账号,立即注册</router-link>
              <router-link class="aitem forget"  :to="{name:'forgetpass'}">忘记密码</router-link>
          </p>
      </div>
      <div style="margin: 0.5rem;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
</template>

<script>
export default {
  data(){
    return {
      form:{

      },
      type:"password"
    }
  },
  mounted(){
    if(this.$route.query.phone){
       this.form = {
         ...this.form,
         phone:this.$route.query.phone
       }
    }else{
       this.form = {
         ...this.form,
         phone:localStorage.getItem("phone")
       }
    }
  },
  methods:{
    checkFail(){
        this.$notify({
          message: '请输入有效的登录信息',
          color: '#ad0000',
          background: '#ffe1e1',
      });
    },
    onSubmit(value){
        // 登录
        this.$ajax.finduser({
          phone:value.phone
        })
        .then(res=>{
           console.log(res)
           if(res.length>0){
             if(res[0].password==value.password){
                this.$notify({
                    type: 'success',
                    message:"登录成功"
                });
                this.changeUserInfo(res[0])
                localStorage.setItem("phone",value.phone);
                this.$nextTick(()=>{
                  if(this.$route.query.from){
                    this.$router.push({name:'mine'})
                  }else{
                    this.$router.go(-1); // 区分 
                  }
                })
                
             }else{
                this.$notify({
                    message: '用户名或密码错误',
                    color: '#ad0000',
                    background: '#ffe1e1',
                });
             }
           }else{
              this.$notify({
                  message: '用户不存在',
                  color: '#ad0000',
                  background: '#ffe1e1',
              });
           }
        })
    },
    changetype(){
      this.type = this.type == 'password'?'text':'password'
    },
  }
}
</script> 

<style lang="scss" scoped>
.links{
  display: flex;
  justify-content: space-between;
}
.aitem{
  text-decoration: none;
  color:brown;
}
.forget{
  color:yellowgreen;
  text-align: right;
}
</style>
